<template>
    <div>
        <div class="warp">
            <BreadCrumb></BreadCrumb>
        </div>
        <h1>成绩分析</h1>
        <el-row class="rows">
            <el-col :span="8" :offset="5">
                <el-input type="text" v-model.trim="stu_id" placeholder="请输入学号"></el-input>
            </el-col>
            <el-col :span="8" :offset="2">
                <el-button @click="getChartsData">分析成绩</el-button>
            </el-col>
        </el-row>
        <div class="names">学生姓名:{{ stu_name }}</div>
        <div class="echartsAnalysis">
            <el-row>
                <el-col :span="8">
                    <div id="main" style="width:100%;height:100%">1</div>

                </el-col>
                <el-col :span="8">
                    <div id="chineseChart" style="width:100%;height:100%">2</div>

                </el-col>
                <el-col :span="8">
                    <div id="mathChart" style="width:100%;height:100%">3</div>

                </el-col>
                <el-col :span="8">
                    <div id="englishChart" style="width:100%;height:100%">4</div>

                </el-col>
                <el-col :span="8">
                    <div id="lizongChart" style="width:100%;height:100%">5</div>

                </el-col>
                <el-col :span="8">
                    <div id="wenzongChart" style="width:100%;height:100%">6</div>

                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
import { req_search_entry, req_search_mid, req_search_end } from "@/api/stuInfo";
import { stacked, basisLine } from "@/utils/charts.js"
export default {
    data() {
        return {
            stu_id: '',
            stu_name: '',
        }
    },
    mounted() {
        // this.getMainChart();
    },
    methods: {
        async getChartsData() {
            // 根据学号请求回来的三次考试的成绩
            let result_entry = await req_search_entry(this.stu_id);

            let result_mid = await req_search_mid(this.stu_id);

            let result_end = await req_search_end(this.stu_id);
            // console.log(result_entry.data, result_mid.data, result_end.data);
            this.stu_name = result_entry.data[0].stu_name

            // 将获取的成绩数据传给echarts
            let gradeClass = ["chinese", "math", "english", "lizong", "wenzong"];

            let entryData = [];
            let midData = [];
            let endData = [];
            // 从后台拿到的数据 
            for (let i = 0; i < gradeClass.length; i++) {
                // 成绩处理的结果， 目的是得到 放到echarts堆叠图当中的成绩的值
                getGrade(gradeClass[i], result_entry.data[0], entryData);
                getGrade(gradeClass[i], result_mid.data[0], midData);
                getGrade(gradeClass[i], result_end.data[0], endData);
            }
            // gradeItem 参数是['语文','数学','英语','理综','文综']
            // gradeData是从服务器请求回来的数据
            // scoreData是放到echarts堆叠图当中的值，是数组类型[]
            function getGrade(gradeItem, gradeData, scoreData) {
                for (let key in gradeData) {
                    // console.log(key);
                    if (key === gradeItem) {
                        scoreData.push(gradeData[key]);
                    }

                }
            }

            console.log(entryData, midData, endData);
            // 堆叠图是获取成绩之后产生
            // this.getMainChart(entryData,midData,endData)
            // stacked是utils中封装的堆叠图模块
            stacked(this, "main", entryData, midData, endData)
            function score(that, containId, subject, gradeEntry, gradeMid, gradeEnd, subjectItem) {
                let gradeSubject = [];
                gradeSubject.push(gradeEntry[subjectItem]);
                gradeSubject.push(gradeMid[subjectItem]);
                gradeSubject.push(gradeEnd[subjectItem]);
                console.log(gradeSubject);
                basisLine(that, containId, subject, gradeSubject)
            }
            // 获取各科的成绩分析图
            score(this, "chineseChart","语文",result_entry.data[0],result_mid.data[0],result_end.data[0],"chinese")
            score(this, "mathChart","数学",result_entry.data[0],result_mid.data[0],result_end.data[0],"math")
            score(this, "englishChart","英语",result_entry.data[0],result_mid.data[0],result_end.data[0],"english")
            score(this, "lizongChart","理综",result_entry.data[0],result_mid.data[0],result_end.data[0],"lizong")
            score(this, "wenzongChart","文综",result_entry.data[0],result_mid.data[0],result_end.data[0],"wenzong")
            
        },


    },

}
</script>

<style lang="scss" scoped>
.rows {
    height: 50px;
}

.names {
    text-align: center;
    height: 40px;
}

.echartsAnalysis {
    .el-row {
        .el-col {
            height: 200px;
        }
    }

}
</style>